'use client'

import { useState } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'

export default function MobileNav() {
  const [isOpen, setIsOpen] = useState(false)
  const pathname = usePathname()

  const menuItems = [
    { href: '/', label: 'HOME' },
    { href: '/shop', label: 'SHOP' },
    { href: '/cart', label: 'CART' },
    { href: '/order', label: 'ORDER' },
    { href: '/contact', label: 'CONTACT' },
    { href: '/faq', label: 'FAQ' },
  ]

  return (
    <>
      {/* 移动端导航栏 */}
      <div className="lg:hidden">
        {/* 汉堡菜单按钮 */}
        <button
          onClick={() => setIsOpen(!isOpen)}
          className="fixed top-4 right-4 z-50 p-2 rounded-lg bg-white shadow-lg"
        >
          <span className={`block w-6 h-0.5 bg-gray-600 transition-all duration-300 ${isOpen ? 'rotate-45 translate-y-1.5' : ''}`}></span>
          <span className={`block w-6 h-0.5 bg-gray-600 mt-1.5 ${isOpen ? 'opacity-0' : ''}`}></span>
          <span className={`block w-6 h-0.5 bg-gray-600 mt-1.5 transition-all duration-300 ${isOpen ? '-rotate-45 -translate-y-1.5' : ''}`}></span>
        </button>

        {/* 展开的菜单 */}
        <div
          className={`fixed inset-0 bg-white z-40 transform transition-transform duration-300 ease-in-out ${
            isOpen ? 'translate-x-0' : 'translate-x-full'
          }`}
        >
          <div className="pt-16 px-4">
            {/* 当前页面路径面包屑 */}
            <div className="text-sm text-gray-500 mb-6 px-4">
              {pathname === '/' ? 'Home' : pathname.split('/').map((path, index) => (
                <span key={index}>
                  {index > 0 && ' / '}
                  {path || 'Home'}
                </span>
              ))}
            </div>

            {/* 导航菜单 */}
            <nav className="space-y-1">
              {menuItems.map((item) => (
                <Link
                  key={item.href}
                  href={item.href}
                  className={`block px-4 py-3 rounded-lg ${
                    pathname === item.href
                      ? 'bg-blue-50 text-blue-600'
                      : 'text-gray-600 hover:bg-gray-50'
                  }`}
                  onClick={() => setIsOpen(false)}
                >
                  {item.label}
                </Link>
              ))}
            </nav>
          </div>
        </div>
      </div>

      {/* 桌面端导航栏 - 可以保持原样或根据需要调整 */}
      <nav className="hidden lg:block">
          <div className="flex items-center justify-between h-16">
            <div className="flex space-x-8">
              {menuItems.map((item) => (
                <Link
                  key={item.href}
                  href={item.href}
                  className={`px-3 py-2 rounded-md ${
                    pathname === item.href
                      ? 'text-blue-600 font-medium'
                      : 'text-gray-600 hover:text-gray-900'
                  }`}
                >
                  {item.label}
                </Link>
              ))}
            </div>
          </div>
        
      </nav>
    </>
  )
} 